<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试</h2>
      <button @click="backHandler">back:返回</button>
      <button @click="goHandler">go:前进</button>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <!-- 导航链接:可以设置K的数值,导航链接通过【vue-router插件提供的】全局组件router-link实现-->
      <!-- 导航链接：务必要有to属性 -->
      <router-link class="list-group-item" to="/about">About</router-link>
      <router-link class="list-group-item" to="/home">Home</router-link>
    </div>
    <!-- 展示区:展示的内容 home|about路由组件-->
    <!-- 路由组件出口的地方:路由组件在哪里展示 -->
    <!-- 
        展示区域:展示路由组件的区域（地方）,router-view,它也是Vue-router提供的一个全局组件
        它的作用是:路由组件的出口的地方的设置，说白了,就是路由组件在哪里展会
      -->
 
    <!-- 路由组件的出口地方:home|about -->
    <!-- include:指名字道姓缓存那几个路由组件,别忘记给路由组件起名字 -->
    <keep-alive :include="['home', 'about']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "",
  methods: {
    // 后退
    backHandler() {
      //回退一步:这个API实质并非为了PC端,移动端!!!!
      this.$router.back();
    },
    goHandler(){
      //前进或者后退N步.负数代表回退  正数代表前进

      this.$router.go(2)
    }
  },
};
</script>

<style scoped>
/*项目当中引入bootstrap这个样式:导致咱们这样有权重问题*/
.router-link-active {
  background: pink !important;
  color: white !important;
}
</style>